<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>充实文档内容</title>
    <style>
        .test{
            color: red;
            background: ghostwhite;
        }
        abbr{
            text-decoration: none;
        }

        table{
            magin:auto;
            border: 1px solid #699;
        }
        caption{
            margin: auto;
            padding: .2em;
            font-size: 1.2em;
            font-weight: bold;
        }
        th{
            text-align: left;
            font-style: italic;
            font-weight: normal;
            border: 1px dotted #669;
            background: #9cc;
        }
        th,td{
            width: 10em;
            padding: .5em;
        }
        tr:nth-child(odd){
            background: #ffc;
        }
        tr:nth-child(even){
            background: #cff;
        }

        .container{
            position: relative;
        }

        .slideshow-container{
            width: 100px;
            height: 100px;
            position: relative;
            overflow: hidden;
        }
        .slideshow-img{
            position: absolute;
        }
    </style>
</head>
<body>
    <h1>大合集:DOM第8章/第9章/第10章</h1>
    <article id="eight">
        <h2>第8章</h2>
        <ul>
            <li><a href="#eight" accesskey="1">Eight</a></li>
            <li><a href="#nine" accesskey="2">Nine</a></li>
            <li><a href="#ten" accesskey="3">Ten</a></li>
        </ul>
        <p>abbr:缩略语.DOM读成D-O-M,那就是缩略语.读成dom,就是首字母缩写词</p>
        <h3>What is the Document Object Model?</h3>
        <p>
            The <abbr title="World Wide Web Consortium">W3C</abbr> defines
            the <abbr title="Document Object Model">DOM</abbr> as:
        </p>
        <blockquote cite="http://www.w3.org/DOM/">
            <p>
                A platform- and language-neutral interface that will allow programs
                and scripts to dynamically access and update the
                content, structure and style of documents.
            </p>
        </blockquote>
        <p>
            It is an <abbr title="Application Programming Interface">API</abbr>
            that can be used to navigate <abbr title="HyperText Markup Language">HTML</abbr>
            and <abbr title="eXtensible Markup Language">XML</abbr> documents.
        </p>
    </article>
    <article id="nine">
        <h2>第9章</h2>
        <table>
            <caption>caption</caption>
            <thead>
                <tr>
                    <th>When</th>
                    <th>Where</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>June 9th</td>
                    <td>Portland, <abbr title="Oregon">OR</abbr></td>
                </tr>
                <tr>
                    <td>June 9th</td>
                    <td>Portland, <abbr title="Oregon">OR</abbr></td>
                </tr>
            </tbody>
        </table>
    </article>
    <article id="ten">
        <h2>第10章</h2>
        <div class="container">
            <p id="msg">Whee!</p>
        </div>
        <div>
            <p>There are thins you should know</p>
            <ol id="linklist">
                <li><a href="#ten">structure</a></li>
                <li><a href="#ten">presentation</a></li>
                <li><a href="#ten">behavior</a></li>
            </ol>
        </div>
    </article>
    <script>
        var log = function(msg){
            console.log(msg);
        }

        /**
         * 显示缩略语
         * @returns {boolean}
         */
        function displayAbbr(){
            if(!document.getElementById ||
               !document.getElementsByTagName ||
               !document.createElement ||
               !document.createTextNode)
                return false;
            var article = document.getElementById('eight');
            var abbrs = article.getElementsByTagName('abbr');

            var dl = document.createElement('dl');

            for(var i = 0; i < abbrs.length; i++){
                var abbr = abbrs[i];
                //IE6 地雷
                if(abbr.childNodes.length < 1) continue;

                var key = abbr.firstChild.nodeValue;
                var value = abbr.getAttribute('title');
                //log(key + '-' + value);

                var dt = document.createElement('dt'),
                    dd = document.createElement('dd'),
                    dt_text = document.createTextNode(key),
                    dd_text = document.createTextNode(value);
                dt.appendChild(dt_text);
                dd.appendChild(dd_text);

                dl.appendChild(dt);
                dl.appendChild(dd);
            }
            //IE6 地雷
            if(dl.childNodes.length < 1) return false;

            var h3 = document.createElement('h3'),
                h3_text = document.createTextNode('缩略语列表');
            h3.appendChild(h3_text);

            article.appendChild(h3);
            article.appendChild(dl);
        }

        function displayCite(){
            if(!document.getElementsByTagName ||
               !document.createElement ||
               !document.createTextNode)
                return false;
            var quotes = document.getElementsByTagName('blockquote');

            for(var i = 0; i < quotes.length; i++){
                var quote = quotes[i];
                var url = quote.getAttribute('cite');
                if(!url) continue;

                var link = document.createElement('a'),
                    link_text = document.createTextNode(url);
                link.appendChild(link_text);
                link.setAttribute('href',url);

                var sup = document.createElement('sup');
                sup.appendChild(link);

                //这个会返回所有的节点,什么节点都有,太乱了.
                //最后一个节点是文本节点
                //var childs = quote.childNodes;

                //而这样返回的一定是元素节点
                var childs = quote.getElementsByTagName('*');
                var p = childs[childs.length - 1];
                p.appendChild(sup);
            }
        }

        function addClass(ele,newClass){
            if(!ele.className){
                ele.className = newClass;
            }
            else{
                ele.className += " " + newClass;
            }
        }

        //var movement;
        function moveElement(eleId,final_x,final_y,interval){
            if(!eleId) eleId = 'msg';
            if(!final_x) final_x = 400;
            if(!final_y) final_y = 0;
            if(!interval) interval = 10;

            var ele = document.getElementById(eleId);
            if(!ele) return false;
            if(ele.movement) clearTimeout(ele.movement);

            var x = parseInt(ele.style.left) || 0;
            var y = parseInt(ele.style.top) || 0;
            if(x == final_x && y == final_y) return true;

            //取大值.floor是取小值.round是四舍五入
            var distX = Math.ceil(Math.abs(final_x - x) / 10);
            var distY = Math.ceil(Math.abs(final_y - y) / 10);
            if(x < final_x){
                x += distX;
            }
            if(x > final_x){
                x -= distX;
            }
            if(y < final_y){
                y += distY;
            }
            if(y > final_y){
                y -= distY;
            }

            ele.style.left = x + 'px';
            ele.style.top = y + 'px';

            //很容易出错:字符串拼接,想想结果是怎样的?最终生成的是被一对引号包起来的字符串啊
            //则里面的eleId=msg,则在下个函数调用里,就变成了直接传#msg的元素了!
            //所以这个拼接字符串时,必须把单引号也拼上去
            var repeat = "moveElement('" + eleId + "'," + final_x + "," + final_y + "," + interval + ")";
            //log(repeat)

            ele.movement = setTimeout(repeat,interval);
        }

        function positionElement(id){
            log(id)
            var ele = document.getElementById(id);
            ele.style.position = 'absolute';
            ele.style.left = '50px';
            ele.style.top = 0;
            movement = setTimeout('moveElement()',50);
        }

        function slideShow(){
            var container = document.createElement('div');
            container.className = 'slideshow-container';

            var img = document.createElement('img');
            img.setAttribute('id','slideshow-img');
            img.setAttribute('src','./topics.gif');
            img.setAttribute('alt','topics.gif');
            img.className = 'slideshow-img';

            container.appendChild(img);
            document.getElementById('ten').appendChild(container);
            //document.appendChild(container);

            var links = document.getElementById('linklist').getElementsByTagName('a');
            for(var i = 0; i < links.length; i++){
                var link = links[i];
                link.index = i + 1;
                link.onmouseover = function () {
                    //是要在函数里面,而不是在clear.关键是setTimeout那里
                    //if(this.move) clearTimeout(this.move);

                    var left = -100 * this.index;
                    moveElement('slideshow-img',left,0,10);
                }
            }
        }

        window.onload = function(){
            displayAbbr();
            displayCite();
            //传var,这样是传字符串
            var msg = 'msg';
            //直接传msg,其实是传文档中id为msg的元素
            positionElement(msg)

            //移动雪碧图
            slideShow();
        }
    </script>
</body>
</html>
